<template>
    <div class="bepaid">
        <!-- 订单信息 -->
        <div class="order-box" v-if="lang=='zh' ">
           <h6>{{title}}</h6>
           <p>订单编号：{{data.exchange_code}}</p>
           <p>订单时间：{{data.submit_time}}</p>
        </div>
         <div class="order-box" v-else>
           <h6>{{title}}</h6>
           <p>Order number：{{data.exchange_code}}</p>
           <p>Order time：{{data.submit_time}}</p>
        </div>
        <!-- 置换信息 -->
        <div class="info-box">
            <img v-if=" lang=='zh' " src="http://img.xianyufanshen.net//order/images/zhihuanxinxi@2x.png" alt="">
            <img class="en" v-else src="http://img.xianyufanshen.net//image/jpg/engzhihuanxinxi_eng@2x.png">
            <!-- 换进的 -->
            <div class="goods-box" v-for="(item,index) in inGoods" :key="index" @click="goDetails(inGoods[index].goods_id,0)">
                <div class="img-box">
                    <img :src="item.head_img" alt="">
                    <img v-if="lang=='zh' " class="label" src="http://img.xianyufanshen.net//goods/image/huanjin@2x.png" alt="">
                    <img v-else class="label" src="http://img.xianyufanshen.net//image/jpg/enghuanjin_eng@2x.png" alt="">
                </div>
                <dl>
                    <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{item.title}}</dt>
                    <dd>￥{{item.goods_price}} <span>x{{item.goods_num}}</span></dd>
                </dl>
            </div>
            <!-- 图标 -->
            <div class="handle-box">
                <!-- 选择商品之后 -->
                <div class="selected">
                    <img  src="http://img.xianyufanshen.net//goods/image/zhihuan@2x.png" alt="">
                </div>
            </div>
            <!-- 自己换出的商品 -->
            <div class="sales-box" >
                <div class="goods-box sold-box" @click="goDetails(outGoods.goods_id,1)">
                    <div class="img-box">
                        <img :src="outGoods.head_img" alt="">
                      <img v-if="lang=='zh' " class="label" src="http://img.xianyufanshen.net//goods/image/huanchu@2x.png" alt="">
                        <img v-else class="label" src="http://img.xianyufanshen.net//image/jpg/enghuanchu_eng@2x.png" alt="">
                    </div>
                    <dl>
                        <dt style="display:-webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;text-overflow: ellipsis;">{{outGoods.title}}</dt>
                        <dd>￥{{outGoods.goods_price}} <span>x{{outGoods.goods_num}}</span></dd>
                    </dl>
                 </div>
            </div>
        </div>
        <!-- 物流信息 -->
        <div class="payMoney" v-if="isShowLogistics">
            <p v-if=" lang=='zh' "><img src="http://img.xianyufanshen.net//order/images/wuliuxinxi@2x.png" alt=""></p>
            <p v-else><img class="en" src="http://img.xianyufanshen.net//image/jpg/engwuliuxinxi_eng@2x.png"></p>
            <!-- bottom -->
            <ul class="bottom"  v-if="lang=='zh' ">
                <!-- 平台没发货显示对方物流 平台发货则显示平台物流 -->
                <li v-if="data.platform_toseller_com =='' ">快递公司 <span >{{data.buyer_express_com}}</span></li>
                <li v-else>快递公司 <span >{{data.platform_toseller_com}}</span></li>
                <li v-if="data.platform_toseller_code =='' ">快递单号 <span >{{data.buyer_express_code}}</span></li>
                <li v-else>快递单号 <span >{{data.platform_toseller_code}}</span></li>
            </ul>
            <ul class="bottom"  v-else>
                <li v-if="data.platform_toseller_com =='' ">Courier company <span >{{data.seller_express_com}}</span></li>
                <li v-else>Courier company <span >{{data.data.platform_toseller_com}}</span></li>
                <li v-if="data.platform_toseller_code =='' ">tracking number <span >{{data.seller_express_code}}</span></li>
                <li>tracking number <span >{{data.platform_toseller_code}}</span></li>
            </ul>
        </div>
         <!-- 申请原因 -->
        <div class="payMoney" v-if="type==5">
            <p v-if=" lang=='zh' "><img src="http://img.xianyufanshen.net//order/images/shenqingyuanyin@2x.png" alt=""></p>
            <p v-else><img class="en" src="http://img.xianyufanshen.net//image/jpg/engshenqingyuanyin_eng@2x.png"></p>
            <!-- bottom -->
            <ul class="bottom"  v-if="lang=='zh' ">
                <li v-if="data.buyer_state==9 ||data.buyer_state== 8">申请关闭原因： <span>{{data.buyer_close_reason}}</span></li>
                <li v-else>申请关闭原因： <span>{{data.seller_close_reason}}</span></li>
            </ul>
            <ul class="bottom"  v-else>
                <li v-if="data.buyer_state==9 ||data.buyer_state== 8">Reason for closing： <span>{{data.buyer_close_reason}}</span></li>
                <li v-else>Reason for closing： <span>{{data.seller_close_reason}}</span></li>
            </ul>
        </div>
        <!-- 保证金 -->
        <div class="payMoney" v-if="type==5 || type==4">
            <p v-if=" lang=='zh' "><img class="bzj" src="http://img.xianyufanshen.net//order/images/baozhengjin@2x.png" alt=""></p>
            <p v-else><img src="http://img.xianyufanshen.net//image/jpg/engbaozhengjin_eng@2x.png" alt=""></p>
            <!-- bottom -->
            <ul class="bottom bottomfr">
                <li><i v-if="lang=='zh' ">保证金状态</i> <i v-else>Margin status</i>
                    <span class="red" v-if="data.seller_state == 0">{{data.seller_state_txt}}</span>
                    <span v-else-if="data.seller_state == 8" class="green" >已退回</span>
                    <span v-else-if="data.seller_state == 9">{{data.seller_state_txt}}</span>
                    <!-- 买家已支付保证金、卖家已支付保证金，买家申请关闭 -->
                    <span v-else-if="data.seller_state == 2 && data.buyer_state == 8" class="green" >{{data.seller_state_txt}}</span>  
                    <span v-else-if="data.seller_state == 10 && data.buyer_state == 1" class="red" >{{data.seller_state_txt}}</span>  
                    <span v-else-if="data.seller_state == 1 || data.seller_state==11" class="red" >{{data.seller_state_txt}}</span>  
                    <span v-else-if="data.buyer_state == 7 &&  data.seller_state==2" class="red" >{{data.seller_state_txt}}</span>  
                    <span v-else-if="data.buyer_state == 2 &&  data.seller_state==10" class="red" >{{data.seller_state_txt}}</span>  
                    <span v-else-if="(data.buyer_state == 8 &&  data.seller_state==3) || (data.buyer_state == 5 &&  data.seller_state==7)" class="yellow" >{{data.seller_state_txt}}</span>  
                    <span v-else class="green">{{data.seller_state_txt}}</span>
                    
                </li>
            </ul>
        </div>
         <!-- 底部提示 -->
        <div class="tip"  v-if="type==5" >
            <i></i><span v-if="lang=='zh' ">保证金会在1~3个工作日原路返回，请注意查收</span>
            <span v-else>The deposit will be returned on the original road within 1~3 working days. Please pay attention to check</span>
        </div>
        <!-- 优惠买单按钮 -->
        <div v-if="lang=='zh' ">
            <div @click="deleteOrder" class="btn-box" v-if="type==6 || isDelete" >删除订单</div>
            <div @click="close" class="btn-box yellow" v-if="type==1" >申请关闭交易</div>
            <div class="out-box" v-if="type==10" >
                <div   @click="send" class="close">我要发货</div>
                <div @click="close" class="send" >申请关闭交易</div>
            </div>
            <div @click="sure" class="btn-box" v-if="type==7 && data.seller_state !=7" >确认收货</div>
        </div>    
        <div v-else>
            <div @click="deleteOrder" class="btn-box" v-if="type==4" >Confirm receipt</div>
            <div @click="close" class="btn-box yellow" v-if="type==1" >Apply to close the transaction</div>
            <div @click="close" class="btn-box yellow" v-if="type==10" >I want to ship</div>
            <div @click="sure" class="btn-box" v-if="type==7" >Confirm receipt</div>
        </div>    
        <!-- loading -->
        <div class="loading-box" v-show="loading">
             <van-loading type="spinner" color="white" />
        </div>
    </div>
</template>
<script>
import {getOrdersDetails,postCloseOrder,postSendExpress,postRefuse,postFinishExpress,postDeleteOrder} from '@/api/order/exchange'
import { Loading,Toast,Dialog  ,} from 'vant';

export default {
    name:'exchangeLook',
    //声明组件
    components:{
        [Loading.name]:Loading,
        [Dialog .name]:Dialog ,
        [Toast.name]:Toast,
     
    },
    data (){
        return{
           lang:'zh',//当前网页语言类型 zh 中文  en 英语  
           id:0,//当前订单id
           type:1,//选择商品类型 1购买 0置换
           userId:0,//用户id 
           data:{},//详情数据
           title:'',//订单详情状态标题 
            outGoods:{},//换出的商品
           inGoods:[],//换进的商品 可能是多个
           isShowLogistics:true,//是否显示物流
           loading:false,//加载提示框 是否显示(页面初始加载显示)
           t1:'',//删除提示
           msg1:'',
           t2:'',//收货提示
           msg2:'',
           confirm:"确认",
           cancel:"取消",
           isDelete:false,//是否显示删除按钮
        }
    },
    //实例创建完成后被立即调用
    created (){
        //获得语言类型lang
        if(this.$route.query.lang) {
            this.lang = this.$route.query.lang;
            if(this.lang == 'zh'){
                this.t1 = "确认删除订单?";
                this.msg1 = "订单一旦删除，不可恢复！";
                this.t2 = "确认已经收到货物了吗？";
                this.msg2 = "一旦确认收货，就代表你已经收到了货物！";
            }else{
                this.t1 = "Confirm delete order?";
                this.msg1 = "Once the order is deleted, it cannot be recovered!";
                this.t2 = "Are you sure you have received the goods?";
                this.msg2 = "Once you confirm the receipt, it means that you have received the goods!";
                this.confirm = "confirm";
                this.cancel = "cancel";
            }
        }
        //获取订单id
        if(this.$route.query.id && this.$route.query.id > 0){
            this.id = this.$route.query.id;
             //请求数据
             this.getAllData();
        }else{
            Toast('获得订单ID失败，请返回列表页重试'); 
            this.loading = false;
        }
        //获取用户id
        if(this.$route.query.userId && this.$route.query.userId > 0){
            this.userId = this.$route.query.userId;
             //把用户id存储在缓存
             window.localStorage.setItem("userId",this.userId);
        }else{
            this.userId = window.localStorage.getItem("userId");
        }
         //获取type
        this.type = this.$route.query.type;
        //根据type判断订单类型
        if(this.lang == 'zh'){
            if(this.type  == 1){
                this.title = "双方已支付保证金";
                this.isShowLogistics = false;
            }
            else if(this.type  == 2){
                this.title = "双方已发货";
            }
            else if(this.type  == 3){
                this.title = "平台已验收";
            }
            else if(this.type  == 4){
                this.title = "交易完成";
                 this.isShowLogistics = true;
            }
            else if(this.type  == 5){
                this.title = "申请关闭中";
                this.isShowLogistics = false;
            }else  if(this.type  == 6){
                this.title = "交易已关闭";
                this.isShowLogistics = false;
            }else  if(this.type  == 7){
                this.title = "平台已发货";
               
            }else if(this.type == 8){
                this.title = "等待对方发货";
                this.isShowLogistics = false;
            }
            else if(this.type == 9){
                this.title = "等待对方支付保证金";
                this.isShowLogistics = false;
            }
            else if(this.type == 10){
                this.title = "对方已支付保证金";
                this.isShowLogistics = false;
            }
            else{
                 this.title = "交易已关闭";
                 this.isShowLogistics = false;
            }
        }else{
            if(this.type  == 1){
                this.title = "Both parties have paid a deposit";
            }
            else if(this.type  == 2){
                this.title = "Both parties have shipped";
            }
            else if(this.type  == 3){
                this.title = "The platform has been accepted";
            }
            else if(this.type  == 4){
                this.title = "Transaction complete";
            }
            else if(this.type  == 5){
                this.title = "Application closed";
                this.isShowLogistics = false;
            }else  if(this.type  == 6){
                this.title = "Transaction closed";
                this.isShowLogistics = false;
            }
            else  if(this.type  == 7){
                this.title = "The platform has been shipped";
                
            }else if(this.type == 8){
                this.title = "Waiting for delivery";
                this.isShowLogistics = false;
            }
            else if(this.type == 9){
                this.title = "Waiting for payment";
                this.isShowLogistics = false;
            }
            else{
                 this.isShowLogistics = false;
            }
        }    
       
    },
    //
    methods:{
        //获得所有详情数据
        getAllData(){
            getOrdersDetails(this.id,this.lang).then(res => {
            console.log(res);
            if(res.code == 200){
                this.data = res.data;
                this.outGoods = this.data.outputGoods;
                this.inGoods = this.data.incomeGoods;
                if(this.lang == 'zh'){
                    // debugger;
                    if(this.data.seller_state == 0 || this.data.seller_state == 1){
                        this.data.seller_state_txt = "未支付";
                    }else if(this.data.seller_state == 8){
                        this.data.seller_state_txt = "已退回";
                    }else if(this.data.seller_state == 9){
                        this.data.seller_state_txt = "已没收";
                    }
                    else if(this.data.seller_state == 3 ){
                        if(this.data.buyer_state==8){
                            this.data.seller_state_txt = "冻结中";
                        }else{
                            this.data.seller_state_txt = "已支付";
                        }    
                    }
                    else if(this.data.seller_state == 10 ){//反悔了
                        if(this.data.buyer_state==2){
                            this.data.seller_state_txt = "已没收";
                        }else{
                            this.data.seller_state_txt = "未支付";
                        }    
                    }
                    else if(this.data.seller_state == 7 &&  this.data.buyer_state==5){//反悔了
                       this.data.seller_state_txt = "冻结中";
                
                    }
                    else{
                        this.data.seller_state_txt = "未支付";
                    }

                }else{
                    if(this.data.seller_state == 0 || this.data.seller_state == 1){
                        this.data.seller_state_txt = "unpaid";
                    }else
                    if(this.data.seller_state == 8){
                        this.data.seller_state_txt = "Returned";
                    }else if(this.data.seller_state == 9){
                        this.data.seller_state_txt = "Confiscated";

                    }
                    else if(this.data.seller_state == 3 ){
                        if(this.data.buyer_state==8){
                            this.data.seller_state_txt = "Freezing";
                        }else{
                            this.data.seller_state_txt = "Paid";
                        }    
                    }
                    else if(this.data.seller_state == 10 ){//反悔了
                        if(this.data.buyer_state==2){
                            this.data.seller_state_txt = "Confiscated";
                        }else{
                            this.data.seller_state_txt = "unpaid";
                        }    
                    }
                     else if(this.data.seller_state == 7 &&  this.data.buyer_state==5){//反悔了
                       this.data.seller_state_txt = "冻结中";
                
                    }
                   else{
                        this.data.seller_state_txt = "Freezing";
                    }   
                    
                }
                if(this.data.seller_state == 8 &&  this.data.buyer_state==6){
                    this.isDelete = true;
                }
                // console.log( this.data);
            }else {
                Toast('获取详情失败，请稍后再试~');
            }
            }); 
        },
        //删除订单
        deleteOrder(){
            //先弹窗询问
            Dialog.confirm({
                title: this.t1,
                message:  this.msg1,
                confirmButtonText:this.confirm,
                cancelButtonText:this.cancel
                }).then(() => {
                // on confirm
                    let param = {};
                    param.orderId = this.id;//当前订单id
                    param.lang = this.lang,
                    postDeleteOrder(param).then(res => {
                        if(res.code == 200){
                            //返回上一页
                            let para = {};                        
                            para.linkType = "orderchange";
                            para.lang = this.lang;//显示网页语言类型 zh中文 en英文
                            this.interaction.hLinkToApp(para);	
                        }else{
                            Toast(res.msg);
                        }
                    }) 
                }).catch(() => {
                // on cancel
            });
        },
        //申请关闭交易
        close(){
             console.log("关闭");
            let para = {};
            
            if(this.lang == 'zh'){
                para.title = "申请关闭交易";
            }else{
                para.title = "Apply to close the transaction";
            }
            para.url = "/fackOf?lang="+this.lang+"&id="+this.id+"&userId="+this.userId;
            param.lang = this.lang,
            this.interaction.hLink(para);
        },
        //跳转到我要发货
        send(){
            console.log("发货");
            let para = {};
            if(this.lang == 'zh'){
                para.title = "申请关闭交易";
            }else{
                para.title = "Apply to close the transaction";
            }
            para.url = "/fackOf?lang="+this.lang+"&id="+this.id+"&userId="+this.userId;
            param.lang = this.lang,
            this.interaction.hLink(para);
        },
        //确认收货
        sure(){
            //先弹窗询问
            Dialog.confirm({
                title: this.t2,
                message:  this.msg2,
                confirmButtonText:this.confirm,
                cancelButtonText:this.cancel
                }).then(() => {
                // on confirm
                let param = {};
                param.orderId = this.id;//当前订单id
                param.lang = this.lang,
                postFinishExpress(param).then(res => {
                    if(res.code == 200){
                        //跳转到收货成功页面
                        let para = {};
                       
                        if(this.lang == 'zh'){
                            para.title = "确认收货";
                        }else{
                           para.title = "Confirm receipt";
                        }
                        para.url = "/orderSuccess?type=5&status=0&lang="+this.lang+"&userId="+this.userId;
                        this.interaction.hLink(para);
                    }else{
                        Toast(res.msg);
                    }
                }) 
                }).catch(() => {
                // on cancel
            });
           
        },
        //跳转到商品详情
        goDetails(id,tab){
            // debugger;
            if(tab == 1 || tab == '1'){
                //自己的藏品
                let para = {};
                para.id = id;//藏品详情详情id (返回首页 此参数没有)
                para.linkType = "goodsDetail";
                para.lang = this.lang;//显示网页语言类型 zh中文 en英文
                if(this.lang == 'zh'){
                    para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
                }else{
                    para.rightBtn = "publish"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
                }
                para.HideFootBar = true; //隐藏底部操作按钮 没有该参数代表不隐藏
                console.log("自己",para);
                this.interaction.hLinkToApp(para);
            }else{
                //不隐藏按钮
                let para = {};
                para.id = id;//藏品详情详情id (返回首页 此参数没有)
                para.linkType = "goodsDetail";
                para.lang = this.lang;//显示网页语言类型 zh中文 en英文
                if(this.lang == 'zh'){
                    para.rightBtn = "发布藏品"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
                }else{
                    para.rightBtn = "publish"; //标题栏右上角按钮文字 没有该参数代表右上角没有东西
                }
                console.log("别人",para);
                this.interaction.hLinkToApp(para);
            }
            	
        },
    }
    
}
</script>

<style lang="stylus" scoped>
.bepaid{
    min-height:100%;
    background :#f1f1f1;
    padding-bottom: 1.2rem;
}
// 订单顶部信息
.order-box{
   padding :.4rem .266667rem; 
   height:2.666667rem;
   background :url("http://img.xianyufanshen.net//order/images/beijing_dingdanxiangqing@2x.png") no-repeat;
   background-size:100%;
   box-sizing :border-box;
   h6{
       font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#cb9c57;
        letter-spacing:.0112rem;
        text-align:left;
        line-height :.533333rem;
        
   }
   p{   
       font-family:PingFangSC-Regular;
        font-size:.346667rem;
        color:#cb9c57;
        letter-spacing:.0096rem;
        text-align:left;
        line-height :.533333rem;
        margin-top :.16rem;
   }
}
// 确认信息
.info-box{
    background-color :#fff;
    text-align:center;
    img{
        width :2.96rem;
        height :auto;
        margin .266667rem auto;
        &.en{
            width :3.6rem;
        }
    }
    .goods-box{
        background:#fafafa;
        padding :.266667rem;
        overflow:hidden;
        margin-bottom:.133333rem;
        .img-box{
            width :2.133333rem;
            height :2.133333rem;
            float:left;
            position:relative;
            img{
                width :100%;
                height:100%;
                margin :0;
            }
            img.label{
                width :1.093333rem;
                height :auto;
                position:absolute;
                left 0;
                top :0;
            }
        }
        dl{
            float:left;
            width :73%;
            margin-left :3.3%
            position :relative;
            height: 2.133333rem;
            dt{
                font-family:PingFangSC-Regular;
                font-size:.373333rem;
                color:#494949;
                letter-spacing:.008rem;
                line-height:.533333rem;
                text-align:left;
                   display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 3;
                overflow: hidden;
            }
            dd{
                position:absolute;
                bottom :0;   
                font-family:PingFangSC-Medium;
                font-size:13px;
                color:#cb9c57;
                letter-spacing:0;
                text-align:left;
                width :100%;
               
                span{
                    font-family:PingFangSC-Regular;
                    font-size:.346667rem;
                    color:#2d2d2d;
                    letter-spacing:0;
                    text-align:right;
                    position:absolute;
                    right :0;
                }             
            }
        }
    }
    .sold-box{
        margin-top :.133333rem;
    }
    //选择互换商品操作盒子区
    .handle-box{
        font-family:PingFangSC-Regular;
        font-size:.373333rem;
        color:#eb3148;
        line-height:.533333rem;
        text-align:left;
      
        padding: 0 .266667rem;
        .click-box{
            position: relative;
            height :1.066667rem;
            line-height :1.066667rem;
            span{
                 color:red;
            }
            img.arow{
                height :.32rem;
                width :auto;
                position :absolute;
                right :0;
                top: 50%;
                margin-top :-0.16rem;
            }
        }
        .selected{
            text-align :center;
            img{    
                height :.533333rem;
                width :auto;
            }
        }
      
    }
}
// 物流信息
.payMoney{
    background-color :#fff;
    margin-top :.186667rem;
    padding-top :.4rem;
    
    p{
        text-align :center;
        img{
            width: 2.96rem;
            height: auto;
           &.bzj{
               width :2.586667rem;
           } 
           &.en{
            width: 3.6rem;
           }
        }
    }    
    .bottom{
        span{
            float:right;
        }
    }
   .bottom{
       overflow :hidden;
       font-family:PingFangSC-Regular;
       font-size:.373333rem;
       color:#494949;
        line-height:20px;
       
       li{
            padding :0 .266667rem;
           height :1.066667rem;
           line-height:1.066667rem;
           border-bottom :1px solid #f1f1f1;
           span{
               //float:right;
               &.yue{
                   color:#9b9b9b;
               }
               &.money{
                   color:#cb9c57;
               }
               &.green{
                   color:#58a701;
               }
               &.red{
                   color:#d84053
               }
                &.yellow{
                   color:#cb9c57;
                }
           }
       }
       li:last-child{
           
       }
   }
}
// 选择支付方法
.choosePay{
    margin-top :.266667rem;
    margin-bottom :2.133333rem;
    background-color :#ffffff;
    .choosePay-txt{
        text-align :center;
        img{
            width: 3.76rem;
            height: auto;
            margin: 0.266667rem auto;
        }
    } 
    .relative{
        position:relative;
        .van-cell{
            padding-left :1.28rem!important; 
            font-family:PingFangSC-Regular;
            font-size:.346667rem!important;
            color:#494949;
            text-align:left;
        }
        .choosePay-icon{
            top: 50%;
            left: .4rem;
            margin-top: -0.34rem;
            width :.666667rem;
            height :.666667rem;
            position: absolute;
            z-index: 1;
        }
    }
    .borderbtm{
        border-bottom :.026667rem solid #f1f1f1;
    }   
            
}
//提示
.tip{
    padding :0 .266667rem  0 .746667rem;
    margin-top:.266667rem;
    margin-bottom: 1.6rem;
    position:relative;
    font-family:PingFangSC-Regular;
    font-size:.32rem;
    color:#a2a2a2;
    letter-spacing:.008rem;
    i{
      width :.32rem;
      height :.32rem;
      position :absolute;
      left :.266667rem;
      top:50%;
      margin-top :-0.16rem;
      background :url("http://img.xianyufanshen.net//order/images/tishi_woyaofahuo@2x.png") no-repeat;
      background-size :100%;  
    }
} 
// 底部操作按钮
.btn-box{
    position :fixed;
    left 0;
    bottom:0;
    opacity:0.9;
    background:#ffffff;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
    width:100%;
    height :1.2rem;
    line-height :1.2rem;
    font-family:PingFangSC-Medium;
    font-size:.4rem;
    color:#d84053;
    letter-spacing:.005067rem;
    box-sizing :border-box;
    z-index: 999;
    text-align :center;
    &.yellow{
        color: #cb9c57;
    }
}
.out-box{
    position :fixed;
    left 0;
    bottom:0;
    opacity:0.9;
    background:#ffffff;
    box-shadow:0 0 8px 0 rgba(0,0,0,0.08);
    width:100%;
    height :1.2rem;
    line-height :1.2rem;
    font-family:PingFangSC-Medium;
    font-size:.4rem;
    color:#d84053;
    letter-spacing:.005067rem;
    box-sizing :border-box;
    z-index: 999;
    text-align :center;
    &.yellow{
        color: #cb9c57;
    }
    .send{
        height :1.306667rem;
        line-height :1.306667rem;
        width :29%;
        font-family:PingFangSC-Regular;
        font-size:.4rem;
        color:#cb9c57;
         float:right;
          &.en{
            width: 38%;
        } 
    }
    .close{
        background:#cb9c57;
        width:40%;;
        height :1.306667rem;
        line-height :1.306667rem;
        font-family:PingFangSC-Medium;
        font-size:.4rem;
        color:#ffffff;
        letter-spacing:.007733rem;
        text-align:center;
        float:right;
    }
}
.loading-box{
    width :50px;
    height :50px;
    border-radius :3px;
    background :rgba(0,0,0,.5);
    position :fixed;
    left :50%;
    top:50%;
    margin-left:-25px;
    margin-top :-25px;
    z-index :999999;
    text-align :center;
    vertical-align :middle;
    .van-loading{
       left :50%;
       top:50%;
       margin-left :-15px;
       margin-top :-15px;
    }
}
</style>


